<template>
	<div class="flex-1 flex flex-col overflow-hidden pb-2">
		<profile-info />
		<div class="max-md:px-3 md:px-9">
			<div class="h-[25px]" />
			<ProfileStats :data="data?.playerCareer" />
			<div class="h-[25px]" />
			<!--			<game-list-->
			<!--				:pageSize="3"-->
			<!--				:slidesPerGroup="3"-->
			<!--				:gameData="data?.slugCareer?.map((i: any) => ({ ...i.game, id: i.slug }))" />-->
			<div v-if="false">
				<up-switch-tabs v-model="tab" class="mx-auto mt-6" />
				<component :is="component" />
			</div>
		</div>
	</div>
	<div
		class="absolute top-0 z-1000 flex items-start w-full h-12 px-3 pt-3 text-lg text-white rounded overflow-hidden"
		:style="{ backgroundColor: headerBgColor }">
		<base-icon class="text-t-3 mr-1" name="profile" size="24" />
		<base-text class="mt-[1px]" textT="profile.title.file" block />
		<base-icon
			name="close"
			class="absolute right-3 top-3 cursor-pointer"
			size="20"
			@click="onClose" />
	</div>
</template>

<script lang="ts" setup>
import { computed, inject, onMounted, Ref, ref, watch } from 'vue'
import { getUserCareer } from '@/api/profile.ts'
import { BaseIcon, BaseText } from '@/components/base'
import { UpSwitchTabs, UpSwitchTabsEnum } from '@/components/up'
import ProfileInfo from './profile-info.vue'
import { useProfileStore } from '@/store'
import { PROFILE_TAB } from '@/constants'
import { colorAlpha, getItem, setItem } from '@/utils'
import { useRequest } from '@/hooks'
import ProfileStats from './profile-stats.vue'
import SportsProfile from '@/views/sports/sports-profile/index.vue'
import CasinoProfile from '@/views/casino/casino-profile/index.vue'
import SlotsProfile from '@/views/slots/slots-profile/index.vue'

const userId = inject<Ref<string>>('userId')
const scrollY = inject<Ref<number>>('scrollY')
const resetScroll = inject<any>('resetScroll')
const profileStore = useProfileStore()
const tab = ref(profileStore.profileShow?.tab || getItem(PROFILE_TAB) || UpSwitchTabsEnum.sports)
const component = computed(() => {
	if (tab.value === UpSwitchTabsEnum.sports) {
		return SportsProfile
	} else if (tab.value === UpSwitchTabsEnum.slots) {
		return SlotsProfile
	} else if (tab.value === UpSwitchTabsEnum.casino) {
		return CasinoProfile
	} else {
		return null
	}
})
const headerBgColor = computed(() => colorAlpha('#1b2c38', Math.min(1, scrollY!.value / 224)))

const { run, data } = useRequest<any>(getUserCareer)

const onClose = () => {
	profileStore.hideProfile()
	resetScroll()
}

watch(
	() => profileStore.profileShow?.tab,
	(val) => {
		if (val) {
			tab.value = val
		}
	}
)

watch(tab, (val) => {
	if (!profileStore.profileShow?.tab) {
		setItem(PROFILE_TAB, val)
	}
})

onMounted(() => {
	run({ uid: userId?.value })
})
</script>
